
<template>
    <div class="head">
        <el-popover
        :width="150"
        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
            <template #reference>
                <el-avatar :src="User.photo" />
            </template>
            <template #default>
                <div>
                    <div class="head-item" @click="$router.replace('/login')"><p>退出登录</p></div>
                    <div class="head-item" @click="$router.push('/home')"><p>回到首页</p></div>
                </div>
            </template>
        </el-popover>
    </div>
    <router-view></router-view>
</template>
<script>
export default {
	data() {
        return {
            User: {},
        }
    },
    mounted() {
		this.init()
	},
    methods: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
        init() {
            this.User=this.currentUser();
        }
    },
}
</script>
<style scoped>
.head{
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
}
.head-item{
    height: 30px;
    margin-top: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.head-item p{
    padding-left: 20px;
}
.head-item:hover{
    background-color: rgb(255, 252, 232);
    color:#ffd04b;
    cursor: pointer;
}
</style>